<template>
  <div>
    <back-nav backTitle="剥壳者商铺"></back-nav>
    <div class="sectionsss">
      <div class="store">
        <!-- <div class="storeHeader"> -->
        <van-row>
          <van-col span="3">
            <div class="storeImg">
              <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" alt="" /></div
          ></van-col>
          <van-col span="16 ">
            <div>店铺名</div>
            <div><van-rate v-model="value" />好评率100%</div></van-col
          >
          <van-col span="5">
            <van-button plain hairline type="primary" size="small"
              >+关注</van-button
            ></van-col
          >
        </van-row>
        <!-- </div> -->
        <div>
          <span>今日销量:999</span>
          <span>累计销量:999</span>
          <span>今日销量:999</span>
        </div>
      </div>
      <!-- 轮播 -->
      <van-swipe :autoplay="3000" height="200" indicator-color="#4bd863">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="banner" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- tab标签 -->
      <van-tabs v-model="active" swipeable color="#4bd863">
        <van-tab v-for="(item,index) in title" :title="item" :key='index'>
          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, aliquid esse cumque non illum optio neque, ad consectetur explicabo, ea necessitatibus eligendi dolore consequuntur? Eveniet numquam rerum magnam mollitia magni neque, at, aspernatur ab rem autem sequi explicabo accusantium provident. Quasi similique quia facilis iste quo minima, nostrum eveniet assumenda amet earum temporibus quisquam cum a repudiandae, deleniti minus nam obcaecati sit quis libero dolorem laborum. Est cumque asperiores veritatis tempore architecto neque quam cum doloribus, ea beatae soluta corrupti libero sequi maiores iure reiciendis perferendis placeat, optio aliquam magni accusamus distinctio quos unde. Adipisci cupiditate molestias vel, eligendi numquam eveniet quibusdam possimus eum nostrum obcaecati quam ducimus, minus praesentium! Reprehenderit quas cum fugiat numquam accusamus sequi amet? Laboriosam saepe provident hic fugiat a tempora aperiam temporibus doloribus modi accusantium, ab beatae sapiente, placeat voluptatem. Modi perferendis eligendi quos voluptatibus amet corrupti laboriosam recusandae tempore aperiam in, aspernatur hic consectetur fugiat quo. Recusandae, expedita deleniti quidem reiciendis fugit quibusdam animi aperiam illo ipsa explicabo nisi, totam aut. Obcaecati earum, debitis iusto voluptate dolor quo voluptas eum dignissimos, qui fugit, facere facilis expedita alias iste minus? Ea deleniti tempora libero cum vitae sit porro sequi quam. Deserunt est fugit quidem necessitatibus eligendi numquam, eveniet quo blanditiis. Similique laudantium quisquam praesentium, architecto earum nemo rem aspernatur. Eaque nobis voluptatibus unde ipsum rem esse ab. Excepturi consequuntur qui quae ut vero pariatur! Mollitia impedit deserunt nostrum animi totam illum! Harum ipsam ipsa explicabo, possimus amet asperiores recusandae velit tempora laborum alias veritatis neque, atque ipsum voluptatem aperiam temporibus sequi cum, id saepe? Est praesentium aliquam cupiditate laborum iusto cum architecto quisquam commodi sapiente ex accusantium obcaecati odio aperiam dolor ab rem, corporis explicabo sit? Totam, dignissimos! Dignissimos quas temporibus repellat et voluptatem eligendi illum, neque cum. Velit magni nesciunt itaque eius molestiae minima voluptas praesentium sapiente aspernatur! Minus placeat nesciunt sed dolore, reiciendis, facilis, provident facere inventore explicabo corporis mollitia cum. Facere officia tempora dolore labore at voluptatibus nihil voluptates, optio beatae fugit illo quibusdam similique nobis ullam voluptas quo repudiandae, nemo in quod, veritatis adipisci suscipit consectetur esse? Nostrum et odio necessitatibus accusamus facere tempora animi error praesentium, unde omnis incidunt minima quisquam possimus dolore qui sint a exercitationem similique. Reprehenderit dignissimos vitae fugiat vel deserunt quae culpa expedita iure, delectus labore quas facere modi cumque fugit voluptatum suscipit ipsam libero possimus adipisci minus saepe odit tempora ex? Ipsa, placeat molestiae? Rerum omnis iusto repellat tempore, esse praesentium fugit veritatis nesciunt doloribus qui, ab delectus sint, voluptate nobis consectetur exercitationem molestias hic modi. Aliquam, quaerat debitis commodi ut illo cupiditate sed, sint consequatur sequi libero dolor consectetur ex quisquam est temporibus! Iste unde sapiente dignissimos, cumque omnis odio autem vero blanditiis soluta iure, vel quidem quis libero? Assumenda non eaque quos libero autem! At quam placeat, numquam consequatur ex animi vero. Deleniti libero voluptas veritatis pariatur nam quo commodi, ut repellendus quis aperiam perferendis, rem nemo ipsa, ea officiis amet reprehenderit sed atque delectus! A molestiae animi officiis eligendi sit. Consequuntur, adipisci?</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import BackNav from "../../components/nav/Backnav";
export default {
  components: { BackNav },
  data() {
    return {
      value: "5",
      title:['春季水果','夏季水果','秋季水果','冬季水果'],
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  methods: {
    onClick(name, title) {
      Toast(title);
    },
  },
};
</script>

<style lang="less" scoped>
.store {
  padding: 10px;

  .storeHeader {
    display: flex;
    align-items: center;
  }
  .storeImg {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    img {
      width: 100%;
    }
  }
}
.banner {
  height: 100%;
  width: 100%;
}
</style>